<template>
	<view class="content">
		<view class="match-top-box">
			<view class="match-title">尊敬的法务专员：</view>
			<view class="match-txt">您好！请先与委托人联系一下，指引委托人在“订单详情”-“项目资料”处，先上传资料，以便协助其全面审查订单。祝您圆满成功！感谢您的信任与支持！</view>
			<!--
      <view class="match-title">
				温馨提示：
			</view>
			<view class="match-image-txt">
				<view class="txt-left" style="padding-top: 6rpx;">
					<view class="image-wrapper">
						<image src="@/static/img/warning.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="txt-right green">
					1.指引用户在“订单详情”–“项目资料”里上传案件资料。<view v-if="info.order.self_ident != '应诉方'" class="red" style="display: inline;">务必要求用户上传，其与欠款方确认欠款余额的证据，比如微信聊天、支付宝聊天、电话录音、书面文件等。如用户没有，请指引用户立即补充收集该证据，再上传审查。</view>
				</view>
			</view>
			<view class="match-image-txt">
				<view class="txt-left" style="padding-top: 6rpx;">
					<view class="image-wrapper">
						<image src="@/static/img/warning.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="txt-right green">
					2.与用户确认“案件主体信息”，然后编辑填写。
				</view>
			</view>
			<view class="match-image-txt">
				<view class="txt-left" style="padding-top: 6rpx;">
					<view class="image-wrapper">
						<image src="@/static/img/warning.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="txt-right green">
					3.审查“订单详情”里带<view class="red" style="display: inline;">*</view>号的必填项。如有必填项未做选择，或者选择错误的，告知用户需要修改的地方和原因。
				</view>
			</view>
			<template v-if="isTipShow">
				<view class="match-image-txt">
					<view class="txt-left" style="padding-top: 6rpx;">
						<view class="image-wrapper">
							<image src="@/static/img/warning.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="txt-right green">4.取得用户同意后，点击“更改订单”修改，然后交由用户确认并付款。</view>
				</view>
				<view class="match-image-txt">
					<view class="txt-left" style="padding-top: 6rpx;">
						<view class="image-wrapper">
							<image src="@/static/img/warning.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="txt-right green">5.订单确认无误后，下载“项目资料”里的全部图片，然后用马赛克将图片上的隐私信息遮盖，<br/>
   包括:<br/>
      a.文件开头显示的各方姓名/名称、身份证号码、住址、联系电话等个人/单位信息；<br/>
      b.文件内容中显示的项目名称、地址、经办人员邮箱、微信号等;<br/>
      c.文件最后落款显示的各方姓名/名称、身份证号码、住址、联系电话等个人/单位信息。<br/>
   </view>
				</view>
				<view class="match-image-txt">
					<view class="txt-left" style="padding-top: 5rpx;">
						<view class="image-wrapper">
							<image src="@/static/img/warning.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="txt-right green">6.删除项目资料里原有的全部图片，然后上传您用马赛克遮盖过的图片。</view>
				</view>
				<view class="match-image-txt">
					<view class="txt-left" style="padding-top: 5rpx;">
						<view class="image-wrapper">
							<image src="@/static/img/warning.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="txt-right green">7.联系用户，确认图片上的隐私信息是否遮盖完毕。</view>
				</view>
				<view class="match-image-txt">
					<view class="txt-left" style="padding-top: 5rpx;">
						<view class="image-wrapper">
							<image src="@/static/img/warning.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="txt-right green">8.用户确认无误后，您申请法务服务完成，然后联系用户确认完成。</view>
				</view>
        <view class="match-image-txt" v-if="info.order.price_type != '自费'">
          <view class="txt-left" style="padding-top: 6rpx;">
            <view class="image-wrapper">
              <image src="@/static/img/warning.png" mode="aspectFit"></image>
            </view>
          </view>
          <view class="txt-right green">9.请务必按照订单详情里的每一个条件审查案件，如有任一条件不符合的，均不能受理。
            请按以下顺序审查案件是否在广州/深圳审理：<br/>
            <view class="flex-box"><div class="fontNormal marginLeft5">a、</div><p>看委托人提供的文件上有无争议管辖的约定，有约定由XXXX人民法院管辖，且约定地点在广州/深圳的，就符合。</p></view>
            <view class="flex-box"><div class="fontNormal marginLeft5">b、</div><p>如无a，则看案件各方当事人的地址在哪里，如有一方在广州或深圳的，就符合。</p></view>
            <view style="margin-left: 40rpx">b-1.当事人是个人的，看其身份证住址是否在广州/深圳；</view>
            <view style="margin-left: 40rpx">b-2.当事人是公司的，看其工商注册地址是否在广州/深圳。</view>
            <view class="flex-box"><div class="fontNormal marginLeft5">c、</div><p>如无a和b，则询问委托人是否已经在广州/深圳连续暂住了一年以上。如是，指引委托人在
              “案件基本信息-项目资料”里，下载暂住证明模板填好，然后到其暂住地的街道或社区盖好章，就符合。</p></view>
            <view class="flex-box"><div class="fontNormal marginLeft5">d、</div><p>如无a、b和c，则案件不符合投资人支付的受理条件，请跟委托人沟通是否将订单更改为自
              费。如委托人同意，则点击“更改订单”，为其办理。如委托人不同意，请指引委托人免费“取消订单”。</p></view>
          </view>
        </view>
			</template>
			<text class="title-open blue" style="margin-bottom:10px" @click="isTipShow = !isTipShow">
					<template v-if="isTipShow">
						收起
					</template>
					<template v-else>
						展开
					</template>
				</text>
		-->
			<view class="service-list">
				<button class="service-item active" @click="callVirtualTel">联系委托人</button>
				<button class="service-item active" :disabled="isSpecialistServiceOk || isClientServiceOk"
					@click="$refs.popupServiceOk.open()">法务服务完成</button>
				<button class="service-item active" :disabled="isSpecialistServiceOk || isClientServiceOk"
					@click="jump('/pages/specialist/user/to-cancel', { order_id: order_id,pay_type:info.order.pay_type })">
					取消订单
				</button>
				<button class="service-item active flex1" v-if="isSpecialistServiceOk"
					@click="$refs.popupCancelApply.open()">取消申请</button>
				<button class="service-item active flex1" v-if="isSpecialistServiceOk" style="margin-right: 0;"
					@click="$refs.telephoneClient.$refs.popupTel.open()">催促委托人确认完成</button>
			</view>
			<template v-if="isClientServiceOk">
				<view class="service-list">
					<button class="service-item active flex1" @click="$refs.popupSureServiceOk.open()">确认法务服务完成</button>
					<button class="service-item active flex1" style="margin-right: 0;"
						@click="$refs.popupNoSureServiceOk.open()">退回申请</button>
				</view>
			</template>
		</view>
<!--		<order-unfold-product-text title="产品说明" :isBold="true" :price_type='info.order.price_type'></order-unfold-product-text>-->
		<!-- 案件主体信息 -->
		<order-case :info="info" :userInfo="userInfo" :key="new Date().getTime() + 'case'" :iswancheng="false" @toedit="toedit">
<!--			<template slot="case-edit">-->
<!--				<view class="gray red" style="font-size: 26rpx;">(跟委托人确定后再改)</view>-->
<!--				<button type="default" class="ok-btn" v-if="userInfo.is_fawu=='1'" @click="toedit">编辑</button>-->
<!--			</template>-->
		</order-case>
		<!-- 订单详情  -->
		<order-detail ref="orderAllDetail" :info="info.order" :key="new Date().getTime()">
			<template slot="detail-edit">
				<view class="gray red" style="width: 200rpx;font-size: 26rpx;">（跟委托人确定后再改）</view>
				<button type="default" class="ok-btn" @click="$refs.popupChangeOrder.open()"
					v-if="!isEdit && this.info.order.status != 18">{{orderText}}</button>


				<view class="od-item" style="padding:18rpx 0 0 0;width: 100%;" v-if="info.order.status==18">
				  <button type="default" class="service-item-btn"
				  	@click="$refs.telephoneClient.$refs.popupTel.open()">催促委托人确认并付款</button>
					<button class="service-item-btn" @click="$refs.returnChange.open">取消申请</button>
				</view>
			</template>
		</order-detail>
		<!-- 退回更改弹出层 -->
		<uni-popup ref="returnChange" type="dialog">
			<uni-popup-dialog
					type="info"
					okTxt="是"
					cancleTxt="否"
					content="我要取消申请"
					:before-close="true"
					@confirm="changeOrder2"
					@close="closePop('returnChange')"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 服务完成弹出层 -->
		<uni-popup ref="popupServiceOk" type="dialog">
			<uni-popup-dialog type="info" okTxt="是" cancleTxt="否" content="我已与委托人确认法务服务完成,以便帮其尽快匹配律师"
				:before-close="true" @confirm="confirmServiceOk" @close="closePop('popupServiceOk')"></uni-popup-dialog>
		</uni-popup>
		<!-- 取消申请 -->
		<uni-popup ref="popupCancelApply" type="dialog">
			<uni-popup-dialog type="info" okTxt="是" cancleTxt="否" content="确认取消申请"
				:before-close="true" @confirm="confirmCancelApply" @close="closePop('popupCancelApply')"></uni-popup-dialog>
		</uni-popup>
		<!-- 确认服务完成弹出层 -->
		<uni-popup ref="popupSureServiceOk" type="dialog">
			<uni-popup-dialog type="info" okTxt="是" cancleTxt="否" content="确认法务服务完成" :before-close="true"
				@confirm="sureServiceOk(1, 'popupSureServiceOk')" @close="closePop('popupSureServiceOk')">
			</uni-popup-dialog>
		</uni-popup>

		<!-- 不确认服务完成弹出层 -->
		<uni-popup ref="popupNoSureServiceOk" type="dialog">
			<uni-popup-dialog type="info" okTxt="是" cancleTxt="否" content="确认退回申请" :before-close="true"
				@confirm="sureServiceOk(2, 'popupNoSureServiceOk')" @close="closePop('popupNoSureServiceOk')">
			</uni-popup-dialog>
		</uni-popup>
		<!-- 我的身份 -->
		<u-select v-model="showIdent" mode="mutil-column-auto" :list="infoIdent" @confirm="confirmIdent"
			confirm-color="#FFC801"></u-select>
		<!-- 编辑案件主体弹窗 -->
		<!-- 确认修改订单弹出层 -->
		<uni-popup ref="popupChangeOrder" type="dialog">
			<uni-popup-dialog type="info" okTxt="是" cancleTxt="否" content="我已与委托人确认更改订单" :before-close="true"
				@confirm="changeOrder" @close="closePop('popupChangeOrder')"></uni-popup-dialog>
		</uni-popup>
		<!-- 打电话组件 -->
		<order-telephone name="委托人" :phoneNumber="info.order.user_mobile" ref="telephoneClient"
			v-if="info.order.user_mobile"></order-telephone>
		<order-telephone name="律师" :phoneNumber="info.order.lawyer_mobile" ref="telephoneLawyer"
			v-if="info.order.lawyer_mobile"></order-telephone>
		<order-telephone name="投资人" :phoneNumber="info.order.investor_mobile" ref="telephoneInvestor"
			v-if="info.order.investor_mobile"></order-telephone>
		<!-- 全局通用组件 -->
		<law-common ref="lawCommon"></law-common>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/common/mixins/specialist_order_state.js';
	import {
		share_coupon
	} from '@/common/mixins/share_coupon.js';
  import { mapGetters, mapMutations } from 'vuex';
	export default {
		mixins: [mixin, share_coupon],
		data() {
			return {
				info: {
					order: {}
				},
				order_id: '',
				requirement: '', //委托人诉求
				showIdent: false,
				infoIdent: [], //我的身份选择
				my_ident: '', //我的身份
				examine:'',
				// clientInfo: [{
				// 		self_type: false,
				// 		self_name: '', //姓名
				// 		self_code: '', //证件号码
				// 		self_tel: '' //联系电话
				// 	}],
				// otherInfoLIst: [{
				// 	dui_type: false,
				// 	dui_name: '', //姓名
				// 	dui_code: '', //证件号码
				// 	dui_tel: '' //联系电话
				// }],
				isEdit: false, //法务是否已经修改了订单
				orderText: '更改订单',
				isTipShow: false,
			};
		},
    computed: {
    ...mapGetters(['userInfo'])
    },
		onLoad(params) {
			if (params.order_id) {
				this.order_id = params.order_id;
				this.init();
			}
			if (params.edit) {
				this.isEdit = true
			}

		},
		onShow(){
			if(this.order_id){
				this.init();
			}
		},
		methods: {
			urgeOrder() {
				uni.showToast({
					title: '请联系委托人尽快确认，谢谢！',
					icon: 'none'
				});
			},
			async init() {
				let formData = {
					id: this.order_id,
					token: uni.getStorageSync('token')
				};
				let res = await this.$api('index.orderDetail', formData);
				this.info = res.data;
				if (res.data.order.status == 19) {
					this.orderText = '重新更改'
				}
				if (this.info.order.status == 20 || this.info.order.status == 19) {
					this.isEdit = false;
				}
				this.getOrderState(this.info);

				let formDataIdent = {
					token: uni.getStorageSync('token')
				};
				let resIdent = await this.$api('index.ident', formDataIdent);
				this.infoIdent = resIdent.data;
				// 案件主体初始化
				this.requirement = res.data.order.requirement;

			},
			async confirmServiceOk() {
				let formData = {
					id: this.order_id,
					token: uni.getStorageSync('token')
				};
				let res = await this.$api('index.legal_sure', formData);
				if (res.code == 1) {
					this.isSpecialistServiceOk = true;
					this.$refs.popupServiceOk.close();
				}
			},
			async sureServiceOk(status, pop) {
				let formData = {
					id: this.order_id,
					token: uni.getStorageSync('token'),
					status: status
				};
				let res = await this.$api('index.legal_sure_over', formData);
				if (res.code == 1) {
					if (pop == 'popupSureServiceOk') {
						this.closePop('popupSureServiceOk');
						this.replace('/pages/specialist/user/service-ok', {
							order_id: this.order_id
						});
					} else if (pop == 'popupNoSureServiceOk') {
						this.closePop('popupNoSureServiceOk');
						this.isClientServiceOk = false;
						this.isSpecialistServiceOk = false;
					}
				}
			},
			async confirmCancelApply() {
				let formData = {
					id: this.order_id,
					token: uni.getStorageSync('token')
				};
				let res = await this.$api('index.fawuback', formData);
				if (res.code == 1) {
					this.closePop('popupCancelApply');
					this.init();
				}
			},
			async callVirtualTel() {
				let formData = {
					id: this.order_id,
					token: uni.getStorageSync('token')
				};
				let res = await this.$api('index.virtual_tel', formData);
				if (res.code == 1) {
					let phoneNumber = res.data.middleNumber;
					const nav = navigator.userAgent;
					if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
						phone.call(phoneNumber);
					} else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
						this.$bridge.callhandler('call', phoneNumber, data => {});
					}
				}
			},
			urged() {
				uni.showToast({
					title: '请联系委托人尽快确认，谢谢！',
					icon: 'none'
				});
			},
			confirmIdent(e) {
				this.my_ident = e[2];
				this.examine = e[1]
			},
			  // 跳转编辑页面
			   toedit(type){
          if(this.userInfo.is_fawu=='1'){
            this.jump('/pages/specialist/user/service-edit', {order_id: this.info.order.id,type:type,usertype:'1'});
          }
			 },
			 async changeOrder2(){
			 	let formData = {
			 		id: this.order_id,
			 		token: uni.getStorageSync('token'),
			 	};
			 	let res = await this.$api('index.userBackFawu', formData);
			 	this.$refs.returnChange.close();
			 	this.init()
			 },
			changeOrder() {
				this.closePop('popupChangeOrder');
        console.log("=====this.info.order.",)
				let copy_self_ident = this.info.order.self_ident;
				if(this.info.order.self_ident == '收款方'){
					copy_self_ident = '起诉方';
				}
				let params = {
          //审理地点
          // order_id: this.info.order.id,
          server_address: this.info.order.server_address,
          profession: this.info.order.profession,
          server_name_id:this.info.order.server_name_id,
					order_id: this.info.order.id,
					product_id: this.info.order.id,
					area_id: this.info.order.fali_serve_area_id,
					product_name: this.info.order.pro_name,
					bearFees: this.info.order.price_type,
					product_image: this.info.order.bg_image,
					stage:this.info.order.lawsuit+' '+this.info.order.stage,
					price_type_text:this.info.order.money_type_num,
					type: 'change',
					edit: true,
          requirement:this.info.order.requirement,
          shenfen_images:this.info.order.shenfen_images,
          huan_images:this.info.order.huan_images,
          liaotian_images:this.info.order.liaotian_images,
          jietiao_images:this.info.order.jietiao_images,
          cuishou_images:this.info.order.cuishou_images,
          other_images:this.info.order.other_images,
          card_images:this.info.order.card_images,
          source:JSON.stringify(this.info.order.source_submit),
          self_ident:copy_self_ident,
          is_believe:this.info.order.is_believe,
          is_fayuan_zhixing:this.info.order.is_fayuan_zhixing
				};
				this.jump('/pages/client/order/order-court-own', params);
			}
		}
	};
</script>

<style lang="scss">
	.check-img {
		width: 15px;
		height: 15px;
		margin-right: 6rpx;
		// margin-top:4px;
		position: relative;
		top: 6rpx;

	}
	::v-deep .uni-popup.editPopup {
		overflow: hidden;
		>view{background-color: #fff !important;}
		.uni-popup__wrapper{
			width: 100% !important;
			margin-top: 12% !important;
			overflow-y: scroll !important;
			z-index: 8888;
		}
		.popup-common-box{
			width: 100%;
			border-radius: 0px;
			height: 100%;
			z-index: 100;
			.popup-title{
				background-color: rgb(255, 200, 1);
				color: rgb(255, 255, 255);
				padding: 1px 3px;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				.title-txt{
					font-size: 17px !important;
					font-weight: normal;
				}
				.title-close{
					display: none;
				}
			}
			.popup-con{
				// height: 86%;
				height: 100% !important;
				max-height: 100%;
				width: 100% !important;
				overflow: auto !important;
			}
		}
	}


	.uni-scroll-view {
		overflow: visible !important;
	}

	.content {
		padding-bottom: 30rpx;
	}

	.textaligncenter {
		text-align: center;
	}

	.item-tip {
		line-height: 58rpx;
	}

	.od-title {
		flex-wrap: wrap !important;
	}

	.urge-order {
		width: 100%;
		margin-top: 20rpx;
		position: relative !important;

	}

	.case-title {
		margin-bottom: 10rpx;
		position: relative;
		padding-left: 30rpx;

		.title-del {
			.image-wrapper {
				width: 35rpx;
				height: 35rpx;

				image {
					vertical-align: middle;
					width: 100%;
					height: 100%;
				}
			}

			float: right;
		}

		&::before {
			content: '';
			position: absolute;
			width: 10rpx;
			height: 25rpx;
			background-color: $uni-color-primary;
			border-radius: 40rpx;
			left: 0;
			top: 8rpx;
		}
	}

	.gray {
		width: 400rpx !important;
		margin-left: 10rpx;
	}

	.red {
		color: #f20000;

	}
	::v-deep .textarea{
		height: auto !important;
		width: 100%;
	}
	::v-deep .uni-textarea-compute, ::v-deep .uni-textarea-line {
		display: none;
	}
	::v-deep .uni-textarea-textarea{
		position: relative!important;
	}
	::v-deep .input{
		 .right-textarea{
			 .textarea{
				 border: 1px solid #eee;
				 padding: 20rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
			 }
			 .textarea-tip{
				 display: none;
			 }

			 .word-num{
				 right: 24rpx;
			 }
		}
	}
	.service-item-btn{
		margin-left: 0;
		margin-right: 30rpx;
		margin-top: 10rpx;
		background-color: #FFC801;
		color: #ffffff;
		border: none;
		height: 65rpx;
		line-height: 65rpx;
	width: 50%;
    font-size:26rpx;
	}
  .flex-box{
    display: flex;
    line-height: 26px;
    position: relative;
    .leftpoint{
      position:absolute;
      left:-1px;
      font-weight: normal;
      color:#303133;
    }
    .fontNormal{
      font-weight: normal;
      min-width: 22rpx;
      max-width: 22rpx;
    }
    .marginLeft5{
      display: inline-block;
      margin-right:8px;
    }
  }
</style>
